<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="view">
			<view class="top">
				<view :style="{ marginLeft: index == 0 ? '0rpx' : '40rpx' }" @click="navClick(item)"
					:class="navIndex == item.value ? 'top_items_active' : 'top_items'" v-for="(item, index) in navList"
					:key="index">
					{{ item.label }}
				</view>
			</view>
			<view class="title">
				练习{{ practiceTimes }}次，正确率平均{{ accuracy }}
			</view>
			<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
			</uni-ec-canvas>
		</view>
	</view>
</template>

<script>
import { getLearningSituation } from '@/api/index.js'
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts.js'
import {
	systemInfo
} from '../../utils/mixin'
export default {
	components: {
		uniEcCanvas
	},
	mixins: [systemInfo],
	data() {
		return {
			navList: [{
				label: '练习',
				value: '1'
			},
			// {
			// 	label: '升级',
			// 	value: '2'
			// },
			// {
			// 	label: 'PK',
			// 	value: '3'
			// }
			],
			navIndex: '1',
			practiceTimes: '0',
			accuracy: '0%',

			ec: {
				//是否懒加载
				lazyLoad: true
			},
			labelList: [],
			valueList1: [],
			valueList2: []
		}
	},
	onLoad() {
		// 状态栏高度
		this.getSystemInfo();
		this.labelList = ['第1日', '第2日', '第3日', '第4日', '第5日', '第6日', '第7日',]
		// this.valueList1 = [90, 70, 98, 11, 22, 66, 77]
		// this.valueList2 = [22, 33, 33, 44, 66, 66, 77]
		this.getDetail()
	},
	onShow() {
		
	},
	methods: {
		async getDetail(){
			const res = await getLearningSituation()
			this.practiceTimes = res.data[0].practiceTimes
			this.accuracy = res.data[0].accuracy
			this.valueList1 = res.data.map(item=>item.correctNumber)
			this.valueList2 = res.data.map(item=>item.incorrectNumber)
			this.$refs.canvas.init(this.initChart)
		},
		navClick(item) {
			this.navIndex = item.value
		},
		initChart(canvas, width, height, canvasDpr) {
			const chart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: canvasDpr
			})
			var that = this;
			canvas.setChart(chart)
			const colorList = ["rgb(254,187,161)", "rgb(155,115,82)"];
			let option = {
				backgroundColor: 'white',
				grid: {
					top: '10%',
					left: '0%',
					right: '0%',
					bottom: '0%',
					containLabel: true,
				},
				color: colorList,
				legend: {
					show: false,
				},
				tooltip: {
					trigger: "axis",
				},
				xAxis: {
					data: that.labelList,
					axisLine: {
						show: true,
						lineStyle: {
							color: '#000',
						}
					},
					axisLabel: {
						color: '#000',
						fontSize: 12,
					},
				},
				yAxis: [{
					type: 'value',
					nameTextStyle: {
						color: "#000",
						fontSize: 14,
						padding: [0, 0, 0, 30]
					},
					axisLabel: {
						color: '#000',
						fontSize: 12
					},
					splitLine: { //网格线
						"show": false,
					}
				}],
				series: [{
					name: '',
					type: 'bar',
					itemStyle: {
						normal: {
							barBorderRadius: [30, 30, 0, 0],
						},
					},
					barWidth: '10',
					data: that.valueList1,
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
					}
				},
				{
					name: '',
					type: 'bar',
					itemStyle: {
						normal: {
							barBorderRadius: [30, 30, 0, 0],
						},
					},
					barWidth: '10',
					data: that.valueList2,
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
					}

				}
				]
			}
			chart.setOption(option)
			return chart

		}
	},
}
</script>

<style lang="less" scoped>
.content {
	background-color: rgb(245, 245, 245);
	width: 100%;
	box-sizing: border-box;

	.view {
		width: calc(100% - 60rpx);
		height: calc(100% - 60rpx);
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		position: relative;
		top: 30rpx;
		margin: auto;
		overflow: auto;
		border-radius: 15px;

		.uni-ec-canvas {
			width: 100%;
			height: 500rpx;
			display: block;
			margin-top: 30rpx;
		}

		.title {
			font-size: 30rpx;
			text-align: center;
			margin-top: 40rpx;
		}

		.top {
			width: 100%;
			border-bottom: 1px solid rgba(179, 173, 173, 0.2);
			display: flex;
			align-items: flex-end;
			box-sizing: border-box;
			padding-bottom: 20rpx;

			.top_items {
				font-size: 30rpx;
				color: rgb(179, 173, 173);
			}

			.top_items_active {
				font-size: 34rpx;
				color: #000;
			}
		}

	}
}
</style>